<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="open-dev-tools">打开调试面板</button>
<button id="close-dev-tools">关闭调试面板</button>
<button id="get-version-info">获取系统信息</button>

<div id="info-box" style="display: none">
    <h1>你好</h1>
    <p>我们正在使用 Node.js 的 <span id="node-version"></span>版本,</p>
    <p>Chromium 的 <span id="chromium-version"></span>版本</p>
    <p>和 Electron 的 <span id="electron-version"></span>版本</p>
</div>
</body>
</html>
<script>
    const { ipcRenderer } = require('electron')
    document.getElementById('open-dev-tools').addEventListener('click', () => {
        ipcRenderer.send('open-dev-tools')
    })
    document.getElementById('close-dev-tools').addEventListener('click', () => {
        ipcRenderer.send('close-dev-tools')
    })
    document.getElementById('get-version-info').addEventListener('click', () => {
        ipcRenderer.invoke('get-version').then((versions) => {
            console.log(versions)
            document.querySelector('#info-box').style.display = 'block'
            document.getElementById('node-version').innerText = versions.node
            document.getElementById('chromium-version').innerText = versions.chrome
            document.getElementById('electron-version').innerText = versions.electron
        })
    })
</script>
